<div class="module-ad-detail-sell layout-md">
    <div class="col-left">
        <loading v-if="isLoading === true"></loading>
        <template v-if="isLoading === false">

            <div class="common-head header-container">
                <div class="share-box btn" @click="toShare()">
                    推薦此廣告
                    <i class="icon-share"></i>
                </div>
                <div class="title">{{ orderBaseInfo.currency }}購買{{ orderBaseInfo.assetcode }}</div>
                <div class="sub-title">
                    <span> <i class="icon-info"></i> 只有KYC-1的用戶才能進行購買</span>
                    <a href="javascript:;" @click="toKYCPage()">我的KYC</a>
                </div>
            </div>
            
            <!--基本信息box-->
            <div class="common-container base-info-container">
                <div class="ui-title ui-title--white">基本信息</div>

                <form class="common-basic" name="form" action="javascript:;">
                    <div class="col-row">
                        <div class="col-label">
                            <label>價格</label>
                        </div>
                        <div class="col-text">
                            <span class="text tips-blue">{{ orderBaseInfo.tradePrice }}</span>
                            <span class="text">{{ orderBaseInfo.currency }}/{{ orderBaseInfo.assetcode }}</span>
                        </div>
                    </div>
                    <div class="col-row">
                        <div class="col-label">
                            <label>付款方式</label>
                        </div>
                        <div class="col-text">
                            <span class="text">
                                {{ orderBaseInfo.payType[0]|payTypesFilter }}<template v-if="orderBaseInfo.payType[1]">/{{ orderBaseInfo.payType[1]|payTypesFilter }}</em></template>
                            </span>
                            <span class="text tips-green">確定買入後可查看賬號</span>
                        </div>
                    </div>
                    <div class="col-row">
                        <div class="col-label">
                            <label>付款期限</label>
                        </div>
                        <div class="col-text">
                            <span class="text">30分鐘</span>
                        </div>
                    </div>
                    <div class="col-row">
                        <div class="col-label">
                            <label>所在國家</label>
                        </div>
                        <div class="col-text">
                            <span class="text">{{ orderBaseInfo.country | countryFilter  }}</span>
                        </div>
                    </div>
                    <div class="col-row">
                        <div class="col-label">
                            <label>交易限額</label>
                        </div>
                        <div class="col-text">
                            <span class="text">
                                <!-- {{ orderBaseInfo.minMoney }} -->
                                {{ orderBaseInfo.minAmount }}
                                <!-- {{ orderBaseInfo.tradePrice *  orderBaseInfo.minAmount }}  -->
                                ~ 
                                <!-- {{ orderBaseInfo.maxMoney }} -->
                                {{ orderBaseInfo.maxAmount }}
                                <!-- {{orderBaseInfo.tradePrice *  orderBaseInfo.maxAmount }}  -->
                
                                {{ orderBaseInfo.assetcode }}

                                <!-- CNY -->
                            </span>
                        </div>
                    </div>
                    <div class="col-row remark">
                        <div class="col-label">
                            <label>{{ orderBaseInfo.nickName }}的備註信息</label>
                        </div>
                        <br/>
                        <div class="col-text">
                            <span class="text">
                                {{ orderBaseInfo.remark || '无' }}
                            </span>
                        </div>
                    </div>
                </form>
            </div>

            <!--你想买多少box-->
            <div class="common-container detail-sell-buy-container">
                <div class="ui-title ui-title--white">您想購買多少？</div>
                <form class="m-form-page" name="form" action="javascript:;">
                    
                   <!-- <CnyChangeInput 
                        :assetCode="orderBaseInfo.assetcode" 
                        :price="orderBaseInfo.tradePrice" 
                        :maxCount="orderBaseInfo.maxAmount" 
                        :minCount="orderBaseInfo.minAmount"
                        :precision="orderBaseInfo.assetcode === 'BTC' ? 8 : 4 "
                    ></CnyChangeInput> -->
                    <div class="cny-change-box">
                        <div class="trade-item">
                            <label class="item-label">{{orderBaseInfo.currency}}</label>
                            <input :class="totalError !== ' ' ? 'item-input fn-input-error' : 'item-input'"
                               type="text"
                               :disabled="true" 
                               v-number="{model: 'form.total', precision: 2}"
                               v-model="form.total"
                               @focus="clearError"
                               @keyup="changeTotal"
                               @blur="changeTotal"
                               placeholder="待支付金額" 
                            />
                            <div class="ui-tip" v-show="totalError">
                                <span class="error"> {{totalError}}</span>
                            </div>
                        </div>
                        <img src="./img/trans-icon.png" alt="" width="26" class="trade-icon">
                        <div class="trade-item select">
                            <label class="item-label select-title">
                                {{orderBaseInfo.assetcode}}
                            </label>
                            <input :class="amountError !== ' ' ? 'item-input fn-input-error' : 'item-input'"
                               type="text"
                               v-number="{model: 'form.amount', precision: orderBaseInfo.assetcode === 'BTC' ? 8 : 4 }"
                               v-model="form.amount"
                               @focus="clearError"
                               @keyup="changeAmount"
                               @blur="changeAmount"
                               :placeholder="'請輸入想買入的'+orderBaseInfo.assetcode+'數量'" 
                            />
                            <div class="ui-tip" v-show="amountError">
                                <span class="error"> {{amountError}}</span>
                            </div>
                        </div>
                    </div>





                    <div class="col-row pay-type-choice">
                        <div class="col-label">
                            <label>付款方式</label>
                        </div>
                        <div class="col-input" v-for="item in orderBaseInfo.payType">
                            <label>
                                <input type="radio"
                                   name="payType"
                                   :value="item"
                                   @change="changePayType(item)"
                                   v-model="form.payType"
                                >
                                <span class="text">{{item === "ALIPAY" ? "支付寶" : "銀行卡"}}</span>
                            </label>
                            <!-- <label>
                                <input type="radio"
                                   name="payType"
                                   value="ALIPAY"
                                   @change="changePayType('ALIPAY')"
                                   v-model="form.payType"
                                >
                                <span class="text">支付寶</span>
                            </label>
                            <label>
                                <input type="radio"
                                   @change="changePayType('BANK')"
                                   value="BANK"
                                   name="payType"
                                   v-model="form.payType">
                                <span class="text">銀行卡</span>
                            </label> -->
                        </div>
                    </div>

                    <div class="col-row col-textarea">
                        <div class="col-input">
                            <textarea name="remark"
                              class="input fn-block"
                              autocomplete="off"
                              placeholder="告訴TA您的要求"
                              maxlength="120" 
                              v-model="form.remark"
                              rows="5">      
                            </textarea>
                            <div class="ui-tip"></div>
                        </div>
                    </div>
                    <button type="submit"
                        :disabled="level==='LEVEL0'"
                        class="ui-btn ui-btn--block"
                        v-if="isRequesting === false"
                        @click="submit()"
                        >
                        確定買入
                    </button>
                    <button type="submit"
                            class="ui-btn  ui-btn--block"
                            disabled
                            v-if="isRequesting === true">{{ $t('common.waiting') }}...
                    </button>

                </form>
            </div>
              
            <!--交易须知 box-->  
            <div class="common-container trans-notice-container">
                <div class="ui-title ui-title--white">交易須知</div>
                <ul class="list">
                    <li class="item">賣家的數字貨幣已被鎖定在托管中，受到smart保護，請您放心購買。</li>
                    <li class="item">建議您發起購買交易請求後，應在指定時間內付款並把交易標記為付款已完成，賣家在收到付款後將會放行處於託管中的數字貨幣。</li>
                    <li class="item">為了保障資金賬戶安全及爭議，請一定要通過您在smart平台實名認證的賬號進行付款，如果使用其他賬戶進行付款並發生爭議，平台方將有權利不做處理。</li>
                    <li class="item">當心騙子！交易前請檢查該用戶收到的評價，並對新近創建的賬戶多加留意。</li>
                    <li class="item">請注意，四捨五入和價格的波動可能會影響最終成交的數字貨幣數額。您輸入的固定數額決定最後數額，數字貨幣金額將在請求發佈的同一時間由即時的匯率算出。</li>
                    <li class="item">託管服務保護網上交易的買賣雙方。在發生爭議的情況下，我們將評估所提供的所有信息，並將托管的數字貨幣放行給其合法所有者。</li>
                </ul>
            </div>
        </template>
    </div>

    <div class="col-right">
        <person-info type="sell" :uid="orderBaseInfo.uid"></person-info>
        <recommend-sell :adId="advertId" :assetCode="orderBaseInfo.assetcode"></recommend-sell>
    </div>

    <set-phone v-show="isSettingPhone" v-on:hide="()=>{ this.setPhoneHide() }" :successCbfn="()=>{this.setPhoneCbFn()}"></set-phone>
    
    <!-- 定单已经  删除 -->
    <div class="faild-trade-container ui-mongolia-layer" v-show="orderBaseInfo.isFaildTrade">
        <div class="faild-trade-warp ui-mongolia-warp">
            <div class="faild-trade-title">
            </div>
            <div class="faild-trade-text">
                您的廣告已刪除
            </div>
            <button type="submit"
                class="ui-btn"
                @click="faildTradeClose()"
                >
                確定
            </button>
        </div>
    </div>
    <!-- 定单已经被买   -->
    <div class="buy-trade-container ui-mongolia-layer" v-show="orderBaseInfo.isHadBuyTrad">
        <div class="buy-trade-warp ui-mongolia-warp">
            <div class="buy-trade-title">
            </div>
            <div class="buy-trade-text">
                廣告已被購買
            </div>
            <button type="submit"
                class="ui-btn"
                @click="hadBuyClose()"
                >
                確定
            </button>
        </div>
    </div>

    <!-- 分享   -->
    <div class="share-container ui-mongolia-layer" v-show="isShare">
        <div class="share-warp ui-mongolia-warp">
            <div class="share-title">
                分享鏈接已生成
            </div>
            <div class="share-text">
                {{ shareUrl }}
            </div>
            <i class="ui-close icon icon-close" @click="shareClose()"></i>
        </div>
    </div>

</div>

